<template>
  <div class="back">
    <!-- 搜索 -->
    <div class="header">
      <el-input v-model="searchId" placeholder="搜索故障设备id" size="mini" clearable style="float: left; width: 15%; margin-right: 15px;" />
      <el-button type="primary" size="mini" @click="search">搜索</el-button>
      <el-button type="primary" size="mini" style="margin-right: 12px;" @click="handelClickAdd">报备</el-button>
      <el-button v-if="!isFull" size="mini" type="primary" icon="el-icon-arrow-left" style="float: right; margin-right: 5%;" @click="fullTable">完整列表</el-button>
      <!-- <el-popover v-model="visible" placement="top" width="160">
        <p>确定删除选中的故障设备信息?</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="visible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
        </div>
        <el-button slot="reference" type="primary" size="mini">删除</el-button>
      </el-popover> -->
    </div>
    <!-- 列表 -->
    <div class="table">
      <el-table
        ref="multipleTable"
        :data="situations"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="commitPerson" label="报备人" width="100" />
        <el-table-column prop="location" label="故障设备位置" width="120" />
        <el-table-column prop="deviceId" label="设备编号" width="100" />
        <el-table-column prop="faultType" label="故障类型" width="120" />
        <el-table-column label="报备时间" width="170">
          <template slot-scope="scope">{{ scope.row.faultTime }}</template>
        </el-table-column>
        <el-table-column prop="description" label="描述" show-overflow-tooltip min-width="250" />
        <el-table-column label="状态" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1" style="color: chartreuse;">已处理</span>
            <span v-if="scope.row.status === 0" style="color: red;">未处理</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClickCheck(scope.row)">查看</el-button>
            <!-- <el-button type="text" size="small" @click="handleClickEdit(scope.row)">编辑</el-button> -->
            <span style="margin-left: 15px;" />
            <el-button type="text" size="small" @click="changeStatus(scope.row.id, scope.row.status)">修改状态</el-button>
            <!-- <el-dropdown>
              <span class="el-dropdown-link" style="font-size: x-small;">
                更多<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="changeStatus(scope.row.id, scope.row.status)">修改状态</el-dropdown-item>
                <el-dropdown-item @click.native="deleteViolation(scope.row.id)">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 信息查看表 -->
    <el-dialog title="查看" :visible.sync="isCheck" width="40%" :center="true" show-close>
      <div style="width: 100%;">
        <div class="check">ID: {{ checkForm.id }}</div>
        <div class="check">报备人: {{ checkForm.commitPerson }}</div>
        <div class="check">故障设备位置: {{ checkForm.location }}</div>
        <div class="check">故障设备编号: {{ checkForm.deviceId }}</div>
        <div class="check">故障类型: {{ checkForm.faultType }}</div>
        <div class="check">报备时间: {{ checkForm.faultTime }}</div>
        <div class="check">故障描述: {{ checkForm.description }}</div>
        <div class="check">状态:
          <span v-if="checkForm.status === 1" style="color: chartreuse;">已处理</span>
          <span v-if="checkForm.status === 0" style="color: red;">未处理</span>
        </div>
      </div>
    </el-dialog>
    <!-- 新增表格 -->
    <el-dialog title="报备" :visible.sync="dialogFormVisible">
      <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px">
        <el-form-item class="add" label="设备位置" prop="location" :label-width="formLabelWidth">
          <el-select v-model="addForm.location" filterable placeholder="请选择设备位置" style="width: 100%;">
            <el-option v-for="opt in opts" :key="opt" :label="opt" :value="opt" />
          </el-select>
        </el-form-item>
        <el-form-item class="add" label="设备类型" prop="deviceType" :label-width="formLabelWidth">
          <el-select v-model="addForm.deviceType" filterable placeholder="请选择设备类型" style="width: 100%;">
            <el-option v-for="t in types" :key="t.type" :label="t.typeName" :value="t.type" />
          </el-select>
        </el-form-item>
        <el-form-item class="add" label="设备编号" prop="deviceId" :label-width="formLabelWidth">
          <el-input v-model="addForm.deviceId" autocomplete="off" placeholder="请输入设备编号" />
        </el-form-item>
        <el-form-item class="add" label="故障类型" prop="faultType" :label-width="formLabelWidth">
          <el-select v-model="addForm.faultType" filterable placeholder="请选择故障类型" style="width: 100%;">
            <el-option v-for="f in faults" :key="f" :label="f" :value="f" />
          </el-select>
        </el-form-item>
        <el-form-item class="add" label="发生时间" prop="faultTime" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-form-item class="add">
              <el-date-picker v-model="addForm.faultTime" style="width: 219%;" type="datetime" placeholder="选择时间" value-format="yyyy-MM-dd HH:mm:ss" />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="addForm.description" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-if="isAdd" type="primary" @click="addSituation">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :current-page.sync="page"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="totalCount"
        style="text-align: center; margin-top: 20px"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      pageSize: 7,
      totalCount: 0,
      searchId: '',
      isAdd: true,
      dialogFormVisible: false,
      formLabelWidth: '100px',
      visible: false,
      isCheck: false,
      isFull: true,
      isSearch: false,
      multipleSelection: [],
      addForm: {
        location: '',
        deviceType: '',
        deviceId: '',
        faultType: '',
        faultTime: '',
        description: ''
      },
      checkForm: [],
      situations: [],
      types: [],
      faults: [
        '机械故障',
        '电气故障',
        '液压系统故障',
        '燃油系统故障',
        '冷却系统故障',
        '润滑系统故障',
        '传动系统故障',
        '制动系统故障',
        '控制系统故障',
        '传感器故障',
        '软件故障',
        '电池故障',
        '发动机故障',
        '轮胎故障',
        '起重装置故障',
        '泄漏故障',
        '磨损故障',
        '过热故障',
        '噪音故障',
        '振动故障',
        '电路短路',
        '电路断路',
        '功率不足',
        '启动失败',
        '设备老化',
        '设备腐蚀',
        '设备卡滞',
        '设备掉漆',
        '设备异味',
        '设备异响',
        '设备抖动',
        '设备冒烟',
        '设备漏油',
        '设备漏气',
        '设备漏水',
        '其他'
      ],
      rules: {
        location: [
          { required: true, message: '请输入位置', trigger: 'change' }
        ],
        deviceType: [
          { required: true, message: '请选择设备种类', trigger: 'change' }
        ],
        deviceId: [
          { required: true, message: '请输入设备编号', trigger: 'change' }
        ],
        faultType: [
          { required: true, message: '请输入故障类型', trigger: 'change' }
        ],
        faultTime: [
          { required: true, message: '请选择故障发生时间', trigger: 'change' }
        ],
        description: [
          { required: true, message: '请输入故障描述', trigger: 'change' }
        ]
      },
      opts: ['工地东区', '工地南区', '工地西区', '工地北区']
    }
  },
  watch: {
    page() {
      if (this.isSearch) {
        this.search()
      } else {
        this.getSituationsList()
      }
    }
  },
  mounted() {
    this.getSituationsList()
    this.getTypes()
  },
  methods: {
    getSituationsList() {
      this.axios.get(`http://139.9.77.245:8081/machine-situation/${this.page}/${this.pageSize}`).then(res => {
        if (res.data.code === 0) {
          this.situations = res.data.data.records
          this.totalCount = res.data.data.total
        }
      })
    },
    getTypes() {
      this.axios.get('http://139.9.77.245:8081/device-type').then(res => {
        if (res.data.code === 0) {
          this.types = res.data.data
        }
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClickCheck(row) {
      this.checkForm = JSON.parse(JSON.stringify(row))
      this.isCheck = true
    },
    search() {
      if (this.searchId !== '') {
        this.axios.get(`http://139.9.77.245:8081/machine-situation/${this.page}/${this.pageSize}?deviceId=${this.searchId}`).then(res => {
          if (res.data.code === 0) {
            this.situations = res.data.data.records
            this.totalCount = res.data.data.total
            this.isFull = false
            this.isSearch = true
          }
        })
      }
    },
    fullTable() {
      this.page = 1
      this.searchId = ''
      this.getSituationsList()
      this.isFull = true
      this.isCheck = false
    },
    // handleClickEdit(row) {
    //   this.isAdd = false
    //   this.addForm = JSON.parse(JSON.stringify(row))
    //   this.dialogFormVisible = true
    // },
    handelClickAdd() {
      this.isAdd = true
      this.addForm = {
        location: '',
        deviceType: '',
        deviceId: '',
        faultType: '',
        faultTime: '',
        description: ''
      }
      this.dialogFormVisible = true
    },
    addSituation() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.addForm.status = 0
          this.axios.post('http://139.9.77.245:8081/machine-situation', this.addForm).then(res => {
            if (res.data.code === 0) {
              this.getSituationsList()
              this.$message.success('添加成功')
              this.dialogFormVisible = false
              this.addForm = {
                location: '',
                deviceType: '',
                deviceId: '',
                faultType: '',
                faultTime: '',
                description: ''
              }
            } else {
              this.$message.error('添加失败')
            }
          })
        } else {
          console.log('提交失败')
          return false
        }
      })
    },
    // editSituation() {
    //   this.axios.put(`http://139.9.77.245:8081/machine-situation/${this.addForm.id}`, this.addForm).then(res => {
    //     if (res.data.code === 0) {
    //       this.getSituationsList()
    //       this.$message.success('修改成功')
    //       this.dialogFormVisible = false
    //       this.addForm = {
    //         commitPerson: '',
    //         location: '',
    //         deviceType: '',
    //         deviceId: '',
    //         faultType: '',
    //         faultTime: '',
    //         description: '',
    //         status: ''
    //       }
    //     }
    //     if (res.data.code === 1) {
    //       this.$message.error('修改失败')
    //     }
    //   })
    // },
    changeStatus(id, status) {
      this.$confirm('是否修改状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.put(`http://139.9.77.245:8081/machine-situation/${id}`, status === 1 ? 0 : 1, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          if (res.data.code === 0) {
            this.getSituationsList()
            this.$message.success('修改成功!')
          }
          if (res.data.code === 1) {
            this.$message.error('修改失败!')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    },
    cancel() {
      this.dialogFormVisible = false
      this.addForm = {
        location: '',
        deviceType: '',
        deviceId: '',
        faultType: '',
        faultTime: '',
        description: ''
      }
    }
  }
}
</script>

<style scoped>
.back{
  padding: 10px 15px;
  width: 100%;
  height: 100%;
  background-color: #eee;
}
.header{
  padding: 10px 10px 10px 10px;
  border-radius: 10px;
  background-color: #fff;
}
.table {
    margin-top: 15px;
    padding: 10px 10px 10px 10px;
    border-radius: 10px;
    background-color: #fff;
}
.add {
  text-align: center;
  width: 100%;
}
.check {
  color: black;
  font-size: large;
  margin: 15px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
